<template>
  <el-dialog  width="600px"  :close-on-click-modal="closeonclickmodal" :title="getdialogTitle()" @open="listenopen()"
             @close="close"
             :visible="dialogshow">
          <el-input style="margin-bottom:12px;"
            placeholder="输入关键字进行过滤"
            v-model="filterText" clearable>
          </el-input>
    <div :id="target">
          <el-tree

            :filter-node-method="filterNode"
            :data="URI"
            node-key="id"
            ref="tree"
            show-checkbox
            default-expand-all
            :expand-on-click-node="false"
            style="overflow-y: auto;width:100%;max-height:240px"
          >
            <div class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ data.name }} <el-tag  size="mini" :type="data.mark?'success':'info'">{{data.mark?'已拥有':'未拥有'}}</el-tag></span>
            </div>
          </el-tree>
    <div style="margin-top:20px"></div>
    <el-row style="text-align: right">
      <el-button size="mini" @click="dialogshow = false">取 消</el-button>
      <el-button size="mini" type="primary" @click="toAdd('dialoginfo')">修 改</el-button>
    </el-row>
    </div>
    <div style="margin-top:20px"></div>
  </el-dialog>
</template>
<script>
  export default {
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    inject: ["reload"],
    data() {
      return {
        target:"ediRoleMenus",
        filterText: '',
        URI:[],
        isajax: false,
        closeonclickmodal: true
      }
    },
    props: ['dialogshow', 'dialoginfo'],
    methods: {
      getCheckedKeys() {
        return this.$refs.tree.getCheckedKeys();
      },
      setCheckedKeys(arr) {
        this.$refs.tree.setCheckedKeys(arr);
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      getdialogTitle() {
        return "编辑【" + this.dialoginfo.name + "】角色菜单";
      },
      init() {
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.getAllSysMenuTreeMarkByRoleId,"id":this.target});
        this.proAPI.getJson(this.proAPI.URLS.getAllSysMenuTreeMarkByRoleId, {roleId: this.dialoginfo.id})
        .then((res) => {
            this.URI = res.data;
            this.setCheckedKeys(this.getMarkNode([],res.data));

        })
      },
      getMarkNode(target,dataArr) {
        for (var i = 0; i < dataArr.length; i++) {
          if (dataArr[i].mark&&dataArr[i].type!=1) {
            target.push(dataArr[i].id);
          }
          this.getMarkNode(target,dataArr[i].children);
        }
        // console.log("最终已经存在的节点是",target);
        return target;
      },
      listenopen() {
        if (this.$refs['dialoginfo'] != null) {
          this.$refs['dialoginfo'].resetFields();
        }
        // console.log(this.dialogshow);
      },
      close() {
        this.$emit('changedialogshow');
      },
      toAdd(formName){
        this.$confirm('确定修改该角色菜单吗?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          callback: action => {
            if(action=="confirm"){
              this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.modifyRoleMenus,"id":this.target});
              this.proAPI.postJson(this.proAPI.URLS.modifyRoleMenus,{roleId:this.dialoginfo.id,menus:this.$refs.tree.getCheckedKeys()}).then((res) => {
                this.$message.success({
                  "message": res.message
                })
                this.reload();
              });
            }
          }
        });
      }
    },
    updated() {
      // console.log(333);
    },
    mounted() {
      this.init();
      // console.log("开始创建！！！！！！！！");
    }
  };
</script>
<style lang="css">
  .col_block{
    border: 1px solid #ebebeb;
    border-radius: 3px;
    transition: .2s;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-dialog__body {
    padding: 15px 20px;
    color: #606266;
    font-size: 14px;
  }
</style>
